const colorPicker = document.querySelector("input");
const ctx = document.querySelector("canvas");

function init() {
  const w = 500;
  const h = 300;
  ctx.width = w * devicePixelRatio;
  ctx.height = h * devicePixelRatio;
  ctx.style.width = w + "px";
  ctx.style.height = h + "px";
}

export class DrawCircle {
  constructor(startX, startY, color) {
    this.startX = startX;
    this.startY = startY;
    this.color = color;
    this.endX = endX;
    this.endY = endY;
  }
  get minX() {
    return Math.min(this.startX, this.endX);
  }
  get minY() {
    return Math.min(this.startY, this.endY);
  }
  get maxX() {
    return Math.max(this.startX, this.endX);
  }
  get maxY() {
    return Math.max(this.startY, this.endY);
  }
  draw() {
    ctx.beginPath();
    ctx.moveTo(this.minX, this.minY);
    ctx.lineTo(this.maxX, this.minY);
    ctx.lineTo(this.maxX, this.maxY);
    ctx.lineTo(this.minX, this.maxY);
    ctx.lineTo(this.minX, this.minY);
    ctx.fillStyle = this.color;
    ctx.fill();
  }
}
